<template>
  <div class="home">
    <div class="title">General category</div>

    <div class="carousel">
      <el-carousel :interval="30000" indicator-position="none" type="card">
        <el-carousel-item v-for="item,i in classList" :key="i">
          <!-- <h3 class="medium">{{ item }}</h3> -->
          <div class="img">
            <div class="pos"></div>
            <el-image
              style="width: 240px; height: 240px"
              :src="item.src"
              @click="classProject(item.name)">
            </el-image>
            <div class="title">{{item.name}}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data(){
    return{
      classList:
      [{src:require('../assets/food.png'),name:'食物'},
      {src:require('../assets/book.png'),name:'图书'},
      {src:require('../assets/clothes.png'),name:'衣服'},
      {src:require('../assets/life.png'),name:'生活用品'},
      {src:require('../assets/other.png'),name:'其他'},
      {src:require('../assets/makeup.png'),name:'化妆品'},]

    }
  },
  methods:{
    classProject(kind){
      this.$router.push({path:'/project',query:{kind:kind}})
    }

  }
}
</script>

<style lang="less" scoped>
.home {
  .title {
    margin-top: 100px;
    text-align: center;
    font-weight: 400;
    font-size: 96px;
    color: #FFFFFF;
  }
  .carousel {
    width: 600px;
    margin: 0 auto;
    margin-top: 100px;
    .img {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      position: relative;
      .el-image {
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__mask {
      background: none;
    }
    .pos{
      position: relative;
    }
    .title{
      margin:0px;
      position:absolute;
      font-size: 60px;
     font-weight: 500;
    }
    
    // .el-carousel__item:nth-child(2n) {
    //   // background-color: #99a9bf;
    //   // .pos {
    //   //   position: absolute;
    //   //   width: 240px;
    //   //   height: 240px;
    //   //   background: rgba(0, 0, 0, 0.6);
    //   //   z-index: 12;
    //   //   border-radius: 50%;
    //   // }
    // }
    
    // .el-carousel__item:nth-child(2n+1) {
    //   // background-color: #d3dce6;
    //   .pos {
    //     display: none;
    //   }
    // }
  }
}
</style>
